import React from "react";
import "../css/TodoListBox.css";
import EventBus from "../EventBus";

class TodoListBox extends React.Component{
  constructor(props){
    super()
    this.state = {
      todos:[]
    }
  }

  componentWillMount(){
    EventBus.addListener("addTodo",(todo)=>{
      console.log(todo);
      this.state.todos.push(todo);
      this.setState({
        todos:this.state.todos
      })
    })
  }

  render(){
    return(
      <div className="todo_list_container">
        <div className="todo_list_wrapper">
          {
            this.state.todos.map((todo,index)=>{
              return <div key={index} className="todo_item_container">
                <div>
                  <input type="checkbox"/>
                </div>
                <div>{todo.content}</div>
                <div><button onClick={()=>{
                   this.state.todos.splice(index,1);
                   this.setState({
                     todos:this.state.todos
                   })
                }}>删除</button></div>
              </div>
            })
          }
        </div>
      </div>
    )
  }
}

export default TodoListBox;
